<template>
  <transition name="translate">
    <div class="share-wrapper">
      <common-back :content="title"
                   class="header-back"></common-back>
      <div class="top">
        <div class="img-wrap"
             w-285-285
             aspectratio>
          <img :src="`${shareUrl}${id}`"
               alt=""
               aspectratio-content>
        </div>
      </div>
      <div class="user-name">昵称</div>
      <div class="share-link">链接:{{link}}</div>
      <div class="copy"
           v-clipboard:copy="link"
           v-clipboard:success="onCopy"
           v-clipboard:error="onError">复制链接</div>
      <div class="space"
           border-top-bottom-1px></div>
      <div class="content"
           v-html="content"></div>
    </div>
  </transition>
</template>
<script>
import CommonBack from 'common/headerBack/back'
import base from '@/api/base'
export default {
  name: '',
  components: {
    CommonBack
  },
  data () {
    return {
      title: '我的分享',
      shareUrl: `${base.pro}/api/profile/shareQrcode?user_id=`,
      id: '',
      content: '',
      link: ''
    }
  },
  created () {
    this.getShare()
  },
  methods: {
    onCopy () {
      this.$tip('复制成功')
    },
    onError () {
      this.$tip('复制失败')
    },
    getShare () {
      this.$api.common.share()
        .then(this.getCodeSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    getCodeSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.id = data.user_id
        this.link = data.url
        this.content = data.content
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.share-wrapper
  width 100%
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  background-color $common_bgc
  z-index 30
  padding()
  padding-top 98px
  padding-bottom 38px
  max-height 100vh
  overflow-y scroll

  .header-back
    z-index 40

  .top
    width 285px
    margin 69px auto 25px

    .img-wrap
      background-color #000

  .user-name, .share-link, .copy
    width 100%
    text-align center
    font-size $shop_name
    line-height $shop_name
    font-weight 400
    color $order_content
    margin-bottom 50px

  .share-link
    width 100%
    padding-left 15px
    padding-right 15px
    box-sizing border-box
    text-align left
    line-height 36px
    white-space nowrap
    ellipsis()

  .copy
    color $tab_active
    margin-bottom 70px

  .space
    height 20px
    background-color $space
    width 100%
    margin-bottom 38px

  .content
    padding()
    font-size $shop_name
    line-height 36px
    font-weight 400
    color $order_content

.translate-enter-active, .translate-leave-active
  transition all 0.3s

.translate-enter, .translate-leave-active
  transform translate3d(100%, 0, 0)
</style>
